<template>
  <div class="pagestyle" :style="{background:settingsStore.isDark?'rgba(255,255,255,.8)':''}">
    <waterfallCom v-if="!state.mobanTypeObjoverview" ref="waterfallRef" @openAdd="openAdd" @editClick="editClick"
    @reset="reset"
    :key="state.timetemp" :delTemp="state.delTempSearch" :delTempmobanType="state.mobanType">
      <template v-slot:curdBtn>
        <span v-if="userStore.modify" :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="openAdd(5)">
          <svg-icon :class="state.addModal ? 'active' : ''" class-name="search-icon" icon-class="rizhi" />
          日志
        </span>
      </template>
    </waterfallCom>
    <!-- 新增弹框 -->
    <el-drawer v-model="state.addModal" direction="rtl" size="50%" close-on-click-modal :modal="true"
      @close="state.formData = {}">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>{{
            state.addModalTitle
          }}</span>
        </h4>
      </template>
      <el-radio-group v-model="state.tabradio" size="small" v-if="state.mobanType != 5">
        <el-radio-button label="detail" value="detail">模板详情</el-radio-button>
        <el-radio-button label="log" value="log">使用日志</el-radio-button>
      </el-radio-group>
      <temconfigCom :editWatchState="state.addModal" :isShow="state.isShow" 
      :mobanType="state.mobanType"
       :tabradio="state.tabradio"
       :mobanTypeObjoverview="mobanTypeObjoverview"
        :editId="state.editId" @addModal="cancel"  @delTemp="delTemp">
      </temconfigCom>
    </el-drawer>
  </div>
</template>
<script setup>
  import {
    computed,
    reactive,
    provide,
    onMounted,
    inject,
    nextTick,
    watchEffect
  } from "vue";
  import dayjs from "dayjs";
  import {
    ElMessage
  } from "element-plus";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import temconfigCom from "@/components/commonCom/temconfigCom";
  import waterfallCom from "./com/waterfallCom";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    LazyImg,
    Waterfall
  } from "vue-waterfall-plugin-next";
  import "vue-waterfall-plugin-next/dist/style.css";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  import useSettingsStore from "@/store/modules/settings";
  const settingsStore = useSettingsStore();
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const tableRef = ref(null);
  const waterfallRef = ref(null);
  const props=defineProps({
       mobanTypeObjoverview: {
            default: undefined,
            type: Object
        }
  })
  let state = reactive({
    mobanTypeObjoverview:undefined,
    delTempSearch:undefined,//保持搜索条件
    timetemp: undefined,
    isShow: false,
    mobanType: 'C',
    mobanList: [],
    addModal: false,
    editModal: false,
    addModalTitle: "分站模板",
    tabradio: "detail",
    formData: {},
    tableData: [{
      name: "Test1",
    }],
    editId: undefined,
    // 表单
    formRef: null,
    showAdd: false,
    templateType:'',
    tempObj: {},
    tempType: [{
        label: "分析模板",
        value: "A",
      },
      {
        label: "公式",
        value: "B",
      },
      {
        label: "分站模板",
        value: "C",
      },
      {
        label: "电源模板",
        value: "D",
      },
    ],
    form: {},
    delTemp:false
  });

  function editClick(item) {
    state.editId = item.id;
    state.addModal = true;
    state.mobanType = item.type;
    state.tabradio = "detail";
    state.isShow=undefined
    if (item.type == 'C') {
      state.addModalTitle = "分站模板";
    } else if (item.type == 'D') {
      state.addModalTitle = "电源模板";
    } else if (item.type == "A") {
      state.addModalTitle = "分析模板";
    } else {
      state.addModalTitle = "虚拟测点公式";
    }
  }

  function cancel(type) {
    state.mobanType = undefined;
    state.addModal = false;
    if(type==1){
      state.timetemp=undefined
    } else if(type==2){
      state.timetemp = 0
      state.delTempSearch=dayjs().unix()
    } else{
      state.delTempSearch=undefined
      state.timetemp = dayjs().unix()
      
    }
  }

  // 打开新增弹窗
  const openAdd = (n) => {
    state.addModal = true;
    state.timetemp=true
    state.mobanType = n;
    state.editId = undefined;
    state.tabradio = "detail";
    state.isShow = dayjs().unix()
    if (n == 'C') {
      state.addModalTitle = "分站模板";
    } else if (n == 'D') {
      state.addModalTitle = "电源模板";
    } else if (n == "A") {
      state.addModalTitle = "分析模板";
    } else if (n == "B") {
      state.addModalTitle = "公式";
    } else if (n == 5) {
      state.addModalTitle = "使用日志";
      state.tabradio = "detail";
    }
  };

  function reset(){
    state.form={}
  }
  function delTemp(){
    state.delTemp=dayjs().unix()
  }
  onMounted(() => {
  });
  watchEffect(()=>{
    if(props.mobanTypeObjoverview){
      state.addModal = true;
      state.mobanType=props.mobanTypeObjoverview.type
      state.mobanTypeObjoverview=props.mobanTypeObjoverview
      console.log(props.mobanTypeObjoverview,"mobanTypeObjoverviewmobanTypeObjoverview222")
    }
  })


</script>
<style scoped lang="scss">
.pagestyle{
  height: calc(100vh - 150px) !important;
  // background-color: rgba(255, 255, 255, 0.8);
  margin: 12px;
  border-radius: 8px;
   background: rgba(255, 255, 255, 0.6);
          box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
}
  .del_box {
    padding: 0 20px;
    height: 235px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    img {
      width: 100px;
    }

    .fonts {
      color: rgba(62, 70, 79, 1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .one {
        font-size: 16px;
        font-weight: 700;
      }

      .two {
        font-size: 14px;
        font-weight: 400;
      }
    }
  }

  .form_footer {
    display: flex;
    justify-content: space-between;
  }

  ::v-deep .el-textarea__inner {
    min-height: 91px !important;
  }

  .pagestyle {
    padding: 10px;
    overflow-y: auto;
  }

  .card_box {
    padding: 1px 16px 16px;
    border-radius: 4px;

    &.type1 {
      background-color: rgba(10, 170, 220, 0.08);
    }

    &.type2 {
      background-color: rgba(47, 173, 104, 0.08);
    }

    &.type3 {
      background-color: rgba(171, 122, 224, 0.08);
    }

    &.type4 {
      background-color: rgba(71, 137, 230, 0.08);
    }

    .fbc {
      span {
        font-size: 12px;
        border-radius: 2px;
        padding: 4px;

        &.type1 {
          background-color: rgba(10, 170, 220, 0.16);
          color: rgba(10, 170, 220, 1);
        }

        &.type2 {
          background-color: rgba(47, 173, 104, 0.16);
          color: rgba(47, 173, 104, 1);
        }

        &.type3 {
          background-color: rgba(171, 122, 224, 0.16);
          color: rgba(171, 122, 224, 1);
        }

        &.type4 {
          background-color: rgba(71, 137, 230, 0.16);
          color: rgba(71, 137, 230, 1);
        }
      }

      em {
        font-style: normal;
        font-size: 14px;
        font-weight: 700;
        margin-left: 8px;
      }
    }

    .desc {
      border-radius: 4px;
      background: rgba(255, 255, 255, .8);
      padding: 16px;
      font-size: 14px;

      p {
        span {
          display: inline-block;

          &:nth-child(1) {
            min-width: 60px;
            color: rgba(62, 70, 79, 0.6);
          }

          &.use {
            color: rgba(64, 158, 255, 1);
            border-bottom: 1px solid rgba(64, 158, 255, 1);
          }
        }
      }
    }
  }

  .pets {
    width: 100% !important;
    margin: 0 auto;
    display: flex;
    // flex-wrap: wrap;
    background-color: transparent !important;
  }

  .card {
    width: 32%;
    margin: 10px;
    border-radius: 5px;
  }

  .btn_box {
    position: relative;
    display: flex;

    .type_box {
      position: absolute;
      top: 32px;
      left: -15px;
      z-index: 9;
      padding: 4px 0;
      width: 116px;
      height: 136px;
      background-color: #fff;

      .item {
        width: 100%;
        height: 32px;
        font-size: 14px;
        color: rgba(62, 70, 79, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .item:hover {
        cursor: pointer;
        background-color: #f0f3f4;
      }
    }
  }
</style>